<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="商品管理" left-arrow fixed @click-left="onClickLeft" />
        <div class="order_tabs">
            <van-tabs v-model="active" title-active-color="#F32A23" :border="true" line-width="28px" class=""
                @change="getOrderListChange">
                <van-tab title="出售中" :title-style="{
                    fontWeight: 600,
                    fontSize: '14px'
                }"></van-tab>
                <van-tab title="仓库中" :title-style="{
                    fontWeight: 600,
                    fontSize: '14px'
                }"></van-tab>
                <van-tab title="草稿" :title-style="{
                    fontWeight: 600,
                    fontSize: '14px'
                }"></van-tab>
            </van-tabs>
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"
            style="padding-top:.8rem ;">
            <div class="order_all" v-for="item, index in orderList" :key="index">
                <div class="" v-for="items, index in item.items" :key="index">
                    <div class="order_lists">
                        <img :src="items.left_icon" alt="">
                        <div class="order_goods">
                            <div class="order_goods_name">{{ items.title }}</div>
                            <div class="order_goods_sku">{{ items.sku_text }}</div>
                            <div class="order_goods_price">{{ items.price_text }}</div>
                            <div class="order_goods_price"><span>{{ items.price_text }}</span> </div>
                        </div>
                    </div>
                </div>
                <div class="order_pay">
                    <div class="order_pay_money"></div>
                    <div style="display: flex;">
                        <div v-for="itemBtn, index in item.buttons" :key="index"
                          >
                            <!--  @click="getOrder(itemBtn.key, item.id, item.after_sales_id, item.items)" <van-button class="order_pay_btn" size="small"
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''" round>{{
            itemBtn.name }}</van-button> -->
                            <van-button class="order_pay_btn" size="small"
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''"
                                round @click="delOrder">删除</van-button>
                            <van-button class="order_pay_btn" size="small"
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''"
                                round @click="submitTake">删除草稿</van-button>
                            <van-button class="order_pay_btn" size="small" 
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''"
                                round @click="handleDetail(1)">改价</van-button>
                            <van-button class="order_pay_btn" size="small"
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''"
                                round @click="handleDetail(2)">改库存</van-button>
                            <van-button class="order_pay_btn" size="small" @click="handleRemove"
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''"
                                round>下架</van-button>
                            <van-button class="order_pay_btn" size="small"
                                :color="itemBtn.style ? 'linear-gradient(to right, #FF5851, #E9011B)' : ''"
                                round>编辑</van-button>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <van-popup v-model="show" :style="{ width: '70%' }" round>
            <div class="popup_title" style="padding: 0;padding-top: .2rem;">温馨提示</div>
            <div class="popup_title" v-if="msg == 1">
                是否删除该商品？
            </div>
            <div class="popup_title" v-if="msg == 2">删除后该商品对应的数据会被一并删除，请确认是否删除</div>
            <div class="popup_title" v-if="msg == 3">
                是否下架该商品？
            </div>
            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="cancelPopup">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient(to right, #FF5851, #E9011B)" round @click="orderSubmit">确定</van-button>
            </div>
        </van-popup>
        <van-popup v-model="showDetail" :style="{ width: '80%' }" round>
            <div class="popup_title" style="padding: 0;padding-top: .2rem;">修改{{ detail==1?'价格':'库存' }}</div>
            <div class="field_input">
                <van-field v-if="detail==1" label-width="1rem" v-model="price" label="价格" required placeholder="请输入金额" clearable input-align="left"/>
                <van-field style="margin-bottom: .2rem;" v-if="detail==2" label-width="1.5rem" readonly v-model="price" label="当前库存"  input-align="left"/>
                <van-field v-if="detail==2" label-width="1.5rem" v-model="price" label="修改后库存" required placeholder="请输入修改后库存" clearable input-align="left"/>
            </div>
            <div class="popup_btn_list">
                <van-button class="popup_btn" size="small" round @click="cancelPopup">取消</van-button>
                <van-button class="popup_btn" type="primary" size="small"
                    color="linear-gradient(to right, #FF5851, #E9011B)" round @click="orderSubmit">确定</van-button>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { ORDERLIST, ORDER_CANCEL, ORDER_DELETE, ORDER_COMPLETE } from '@/api/mine';
// import { Dialog } from 'vant';
export default {
    data() {
        return {
            msg: 0,
            show: false,
            active: 0,
            orderList: [],
            loading: false,
            finished: false,
            error: false,
            refreshing: false,
            page: 1,
            pageSize: 20,
            totalCount: 0,
            orderId: '',
            showDetail: false,
            detail:null,
            price: '',
        }
    },
    created() {
        this.active = this.$route.query.id
        // this.getOrderList()
    },
    mounted() {
        window.scrollTo(0, 0)

    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },

        getOrderListChange(index) {
            this.active = index;
            // 数据请求
            this.resetInit();
        },
        resetInit() {
            this.page = 1;
            this.orderList = [];
            this.finished = false;
            this.loading = true;
            this.onLoad()
        },
        onLoad() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            params['status'] = this.active;
            this.$http.get(ORDERLIST, { params: params })
                .then(res => {
                    const {
                        list
                    } = res.data;

                    if (list && list.length) {
                        this.page++;
                        this.orderList = this.orderList.concat(list);
                        //  console.log(this.orderList);

                        // 加载状态结束
                        this.loading = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
        // 按钮
        getOrder(key, id, after_sales_id, items) {
            
        },
        // 取消弹窗
        cancelPopup() {
            this.show = false
            this.showDetail = false
            this.orderId = ''
            // this.detail=null
        },
        // 删除草稿
        submitTake() {
            this.msg = 1
            this.show = true
        },
        // 删除订单
        delOrder() {
            this.msg = 2
            this.show = true
        },
        // 下架
        handleRemove(){
            this.msg = 3
            this.show = true
        },
        // 改库存改价格
        handleDetail(msg){
            this.detail=msg
            this.showDetail = true
        },
        // 弹窗确定按钮
        orderSubmit() {
            let order
             if (this.msg == 1) {
                // 删除草稿
                order = this.$http.post(ORDER_COMPLETE + this.orderId)
            } else if (this.msg == 2) {
                order = this.$http.post(ORDER_DELETE + this.orderId)
                // 删除订单
            }else if(this.msg == 3){
                // xiajia
            }
            order.then(res => {
                this.show = false
                this.$toast.success(res.message);
                this.resetInit();
            }).catch(err => {

            })
        },
    }

}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    padding-top: 46px;
    min-height: 100vh;
    background: #F2F4F5;
    box-sizing: border-box;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }
}

.order_tabs {
    position: fixed;
    width: 100%;
    z-index: 999;
}

.order_all {
    width: 100%;
    margin: 0 auto;
    padding-top: .2rem;
    margin-bottom: 0.2rem;
    // border: 0.01rem solid #999;
    // border-radius: 0.1rem;
    background: #fff;

    .order_name {
        display: flex;
        justify-content: space-between;
        font-size: 0.28rem;
        padding: 0.32rem 0.32rem 0 0.32rem;
        // border-bottom: 0.01rem solid #999;
        box-sizing: border-box;

        img {
            width: 0.4rem;
            height: .4rem;
            vertical-align: middle;
            margin-right: .16rem;
            margin-bottom: 0.06rem;
        }

        &_left {
            font-weight: bold;
        }

        &_right {
            font-size: 0.25rem;
        }
    }

    .order_lists {
        padding: 0 0.32rem;
        display: flex;
        justify-content: space-between;
        margin-top: 0.3rem;

        img {
            width: 1.8rem;
            height: 1.8rem;
        }

        .order_goods {
            width: 70%;
            font-size: 0.3rem;
            line-height: 0.6rem;

            &_name {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                /* 控制显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 0.35rem;
                font-size: 0.28rem;
                font-weight: bold;
            }

            &_sku {
                font-size: 0.24rem;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &_price {
                font-size: 0.32rem;
                font-weight: bold;
                display: flex;
                justify-content: space-between;
                // margin-top: 0.3rem;
                color: #F32A23;

                span:last-child {
                    font-weight: 500;
                    font-size: 0.24rem;
                    color: #999;
                }
            }
        }
    }

    .order_total {
        // margin-left: 2.3rem;
        font-size: 0.25rem;
        margin-top: 0.2rem;
        text-align: right;
        margin-right: .2rem;

        span {
            color: #F32A23;
            font-size: 0.32rem;
            font-weight: bold;
        }

        // bottom: 0;
    }

    .order_pay {
        // border-top: 0.01rem solid #999;
        display: flex;
        justify-content: space-between;
        padding: 0.36rem;

        .order_pay_money {
            font-size: 0.24rem;
            margin-top: 0.2rem;
            line-height: 0.4rem;

            div {
                font-family: PingFangSC, PingFang SC;
                font-weight: 500;
                font-size: .28rem;
                color: #F32A23;
                // line-height: 20px;
                text-align: left;
                font-style: normal;
            }
        }

        .order_pay_btn {
            margin-left: 0.2rem;
            margin-top: 0.2rem;
            padding: 0.12rem 0.24rem;
            font-size: 0.28rem;
            border: 1px solid #e3e3e3;
        }
    }
}

.popup_title {
    width: 95%;
    margin:0  auto;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    font-style: normal;
    padding: 0.72rem 0;
}

.popup_btn_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: .4rem;
    display: flex;
    justify-content: space-between;

    .popup_btn {
        width: 45%;
    }

}

.msg-title {
    text-align: left;
    padding: 0 0.2rem;
    font-size: 0.24rem;
}
.field_input{
    width: 90%;
    // margin: 0 auto;
    margin: .2rem auto;
    .van-cell{
        background: #F2F4F5;
        border-radius: .12rem;
    }
}
</style>
